extends ../commons/commons.pug

block append pageStyle
	link(href="${relativePath}/static/css/shopping/shopIndex.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/newOrder.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/foundation.min.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/foundation-datepicker.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/fileUpload.css" rel="stylesheet" type="text/css")

block content
	//- 新建订单
	div.newOrderContent
		h3.orderTitle 新建订单
		//- 添加表单
		form#newOrder
			//- 新建表单
			div.newBox
			//- 	div.oneList
			//- 		i.del
			//- 		div.row
			//- 			label 字体类型：
			//- 			select.seleStyle.seleStyle01
			//- 				option 冲孔字
			//- 		div.row
			//- 			label 项目类型：
			//- 			select.seleStyle.seleStyle02
			//- 				option LOGO
			//- 		//- 高宽厚
			//- 		div.row
			//- 			label 高宽厚：
			//- 			input.txt.fl.height(type="text" name="height" placeholder="高")
			//- 			span.fl.sign
			//- 			input.txt.fl.width(type="text" name="width" placeholder="宽")
			//- 			span.fl.sign
			//- 			input.txt.fl.thick(type="text" name="thick" placeholder="厚")
			//- 		div.row
			//- 			label 数量：
			//- 			div.addBox.fl
			//- 				span.symbol.reduce.fl -
			//- 				input.txt.number.fl(type="text" name="number" value="1")
			//- 				span.symbol.add.fl +
			//- 			select.fl.seleStyle.unit
			//- 				option 平方米
			//- 		//- 自行填写
			//- 		div.row
			//- 			label 透光材料厚度：
			//- 			input.txt.autoWrite(placeholder="自行填写")
				

			//- 按钮添加/删除
			div.operationBtn
				span.btn.addBtn.fl 添加
				//- span.btn.reduceBtn.fr 删减
			div.restBox
				input.supplierIds(type="hidden" name="supplierIds")
				input.suppliers(type="hidden" name="suppliers")
				input.hiddenTxt(type="hidden" name="textHidden" value="")
				div.row
					label.leftLabel 交货时间：
					input.txt.deliveryTime(type="text" readonly name="deliveryTime" placeholder="请选择交货时间")
				div.row
					label.leftLabel 抢单有效时间：
					select.seleStyle.seleStyle02(name="robTime")
						option 1小时
						option 2小时
						option 3小时
						option 4小时
						option 8小时
						option 12小时
				div.row
					label.leftLabel 指定供应商：
					div.checkBox.fl
						//- label
						//- 	input.supplier(type="checkbox" name="supplier")
						//- 	|  lalal
						//- label
						//- 	input.supplier(type="checkbox" name="supplier")
						//- 	|  lalal
				div.row.textArea
					label.leftLabel 留言：
					textarea.leaveMsg(rows="2" cols="20" name="leaveMsg")
				input(type="hidden",name="order_img")
		div.formsBox
			div.row
				label.leftLabel 上传效果图：
				form#newOrderImg
					div#upImgs.fl
						span.arm *请上传至少一张定制物品的效果图，支持jpg、png、jpeg、bmp格式，单个图片小于4M
						div.z_photo.upimg-div.clear
							section.z_file.fl
								img(src="${relativePath}/static/imgs/addImg.png").add-img
								input(type="file" name="file" id="orderImg" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple" )
			div.row
				label.leftLabel 附件：
				form#fileForm
					span.upImgBtn.fl 上传附件
						input#fileId.file(type="file" name="file")
					span.produceTxt.fl *附件为cdr文件，请添加大小不超过5M的cdr文件作为附件
				div.fileName
		//- 下一步按钮
		div.nextBtn 下一步
				


	//- 新建表单模板
	script#newform(type="text/html")
		//- div.newBox
		div.oneList
			i.del
			div.row
				label 项目类型：
				| {{set words = data.goods_category_lists}}
				select.seleStyle.seleStyle01(name="projects[{{data.index}}].projecttime")
					option 请选择
					| {{each words arr}}
					option {{arr.name}}
					| {{/each}}
			| {{set goodsId = data.category_id}}
			| {{if goodsId == "228"}}
			div.row
				label 字体类型：
				select.seleStyle.seleStyle02(name="projects[{{data.index}}].wordtype")
					option LOGO
					option 中文
					option 英文
			| {{/if}}
			//- 高宽厚
			div.row
				label 高宽厚：
				input.txt.fl.height(type="text" name="projects[{{data.index}}].height" placeholder="高")
				span.fl.sign
				input.txt.fl.width(type="text" name="projects[{{data.index}}].width" placeholder="宽")
				span.fl.sign
				input.txt.fl.thick(type="text" name="projects[{{data.index}}].thick" placeholder="厚")
			div.row
				label 数量：
				div.addBox.fl
					span.symbol.reduce.fl
					input.txt.number.fl(type="text" name="projects[{{data.index}}].number" value="1")
					span.symbol.add.fl
				select.fl.seleStyle.unit(name="projects[{{data.index}}].unit")
					option 个
					option 套
					option 米
					option 平方米
			div.row
				label 出价：
				input.txt.autoWrite(class="myPrice" name="projects[{{data.index}}].myPrice" placeholder="自行填写")
			//- 自行填写
			| {{set types = data.type}}
			| {{each types arr index}}
			div.row
				label {{arr.sku_name}}：
				input.txt.autoWrite(placeholder="自行填写", name="projects[{{data.index}}].autowrite[{{index}}]")
			| {{/each}}


block append pageScript
	script(type="text/javascript" src="${relativePath}/static/js/libs/fileUpload.js")
	script(src="${relativePath}/static/js/jquery.validate.min.js")
	script(src="${relativePath}/static/js/messages_zh.js")

	script.
		$(function() {
			//- 点击删除添加列表
			$(".newBox").on("click",".del:gt(0)",function() {
				var $this = $(this);
				layer.confirm('您确定删除此编辑？', {
					btn: ['确定','取消'] //按钮
				}, function(){
					layer.msg("已删除");
					$this.closest(".oneList").remove();
				}, function(){
						//layer.msg('已取消');
				});
			})

			//点击加号
			$(".newBox").on("click",".add",function() {
				var num = parseInt($(".number").val()) || 0;
				$(".number").val(num + 1);
			})

			//点击减号
			$(".newBox").on("click",".reduce",function() {
				var num = parseInt($(".number").val()) || 0;
				num = num - 1;
				num = num < 1 ? 1 : num;
				$(".number").val(num);
			})

			//- 选择交货时间
			$('.deliveryTime').fdatepicker({
				format: 'yyyy-mm-dd',
				onRender: function (date) {
					var nowTemp = new Date();
					var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
					return date.valueOf() < now.valueOf() ? 'disabled' : '';
				}
			});

			//- 获取供应商及其他列表内容
			$.post(shopIp+"/Category/custom_order",{
				userToken:token,
				category_id:thisRequest.id
			},function(data) {
				//console.log(data);
				var gys = data.data.supplierList;
				//- var newform = template("newform",data);
				$(".newBox").append(template("newform", data));
				$(".addBtn").click(function(){
					data.data.index = $("#newOrder .newBox .oneList").length;
					$(".newBox").append(template("newform", data));
				});
				//- 指定供应商：
				
				for(var i=0;i<gys.length;i++) {
					var gysEle = '<label><input class="address" type="hidden" name="address" value="'+gys[i].address+'"><input class="supplier" type="checkbox" name="supplier" id="'+gys[i].company_id+'" value="'+gys[i].company_name+'">'+gys[i].company_name+'</label>';
					$(".checkBox").append(gysEle);
				}
			})

			//- 选择文件
			$("#fileId").on("change",doUpload);
			function doUpload(argument) {
				var file = this.files[0];
				//- if(!/image\/\w+/.test(file.type)) {
				//- 	alert("文件必须是图片");
				//- 	return false;
				//- }
				var formdata=new FormData($("#fileForm")[0])
				console.log(formdata);
				$.ajax({
					url:shopIp+"/Utils/uploadFiles?userToken="+token,
					type:"post",
					data:formdata,
					dataType:"json",
					async:false,
					cache:false,
					contentType:false,
					processData:false,
					success:function(data) {
						if(data.status == 200) {
							$(".hiddenTxt").val(data.data.path);
						}else{
							layer.msg(data.msg);
						}
						//$(".hiddenTxt").val(data.data.path);
					},
					error:function(data) {
						layer.msg(data.msg);
					}
				})
				$(".fileName").html($(".hiddenTxt").val());
			}

			//- 图片上传
			$("input#orderImg").on("change", function() {
				var wrap = $(this).closest(".upimg-div");
				doUpload_img(this.files[0], function(data) {
					var imgUrl = $("input[name='order_img']").val();
					if(imgUrl) {
						$("input[name='order_img']").val(imgUrl + "," + data.data.path);
					} else {
						$("input[name='order_img']").val(data.data.path);
					}
					wrap.prepend("<span class='imgwarp'><img src='"+data.data.url+"' path='"+data.data.path+"' class='upimgs'></img><i></i></span>");
					if($("span.imgwarp img.upimgs").length > 4) {
						$("#orderImg").hide();
						$(".add-img").hide();
					}
					
				});
			});
			//- 点击删除图片
			$(".z_photo").on("click",".imgwarp i",function() {
				$(this).closest(".imgwarp").remove();
				$("#orderImg").show();
				$(".add-img").show();
			})
			//- 上传图片
			function doUpload_img(file, callback) {
				var formdata=new FormData($("#newOrderImg")[0])
				//console.log(formdata);
				$.ajax({
					url:shopIp+"/Utils/uploadFiles?userToken="+token,
					type:"post",
					data:formdata,
					dataType:"json",
					async:false,
					cache:false,
					contentType:false,
					processData:false,
					success:function(data) {
						//console.log(data.data.path);
						//$(".hiddenTxt").val(data.data.path);
						callback(data);
					},
					error:function(data) {
						layer.msg(data.msg);
					}
				})
			}

			//- 表单验证
			var validator = $("#newOrder").validate({
					rules: {
						projecttime:{
							required:true
						},
						width:{
							required : true,
							number:true
						},
						height:{
							required:true,
							number:true
						},
						myPrice:{
							required:true,
							number:true
						},
						thick:{
							required:true,
							number:true
						},
						deliveryTime:{
							required:true
						},
						supplier:{
							required:true
						}	
					},
					messages : {
						projecttime:{
							required:"请选择项目类型"
						},
						width:{
							required:"请填写宽度"
						},
						myPrice:{
							required:"请填写出价"
						},
						height:{
							required:"请填写高度"
						},
						thick:{
							required:"请填写厚度"
						},
						deliveryTime:{
							required:"请选择交货时间"
						},
						supplier:{
							required:"请选择供应商"
						}
				    },
					errorPlacement: function(error, element) {  
						error.appendTo(element.closest(".row"));
						//- if(element[name="area"]) {
						//- 	error.after(element.closest("#qu"));
						//- }
					}
				});

			
			//- 点击下一步
			$(".nextBtn").click(function() {
				//- console.log($("#newOrder").serialize());
				//- 获取供应商及其他列表
				var supplier = [];
				var supplierIds = [];
				//- 效果图
				var imgsArr = [];
				$(".z_photo img").not(".add-img").not(".add-img1").each(function(){
					imgsArr.push($(this).attr("path"));
				});
				$("input[name='supplier']:checked").each(function() {
					//console.log($(this).val());
					supplier.push($(this).val());
					supplierIds.push($(this).attr("id"));
				});
				$(".suppliers").val(supplier.splice(","));
				$(".supplierIds").val(supplierIds.splice(","));
				if(validator.form()) {
					if($(".seleStyle01").val() == "请选择") {
						layer.msg("请选择项目类型");
					}else if($(".height").val() == "" || $(".width").val() == "" || $(".thick").val() == ""){
						layer.msg("请输入宽高厚");
					} else if($(".myPrice").val() == "") {
						layer.msg("请输入出价");
					} else{
						$.post(shopIp+"/buy/orderPreview",{
							userToken:token,
							category_id:thisRequest.id,
							preview_data:$("#newOrder").serialize(),
							order_files:$(".hiddenTxt").val(),
							order_img:imgsArr,
							type:1
						},function(data) {
							if(data.status == "200") {
								window.location.href = "placenewOrder.html?id="+ data.data.id;
							}
						})
					}
					
				}
			})
			//- $.post(shopIp+"/buy/orderPreviewInfo",{
			//- 	userToken:token,
			//- 	id:14
			//- },function(data) {
			//- 	console.log(data);
			//- })
		})
		